/* 初始化 */
/* 将所有元素的外边距和内边距都设置为0，避免浏览器默认样式的影响 */
* {
    margin: 0;
    padding: 0;
}

/* 设置html和body元素的高度为100%，并设置字体和背景颜色 */
html,
body {
    height: 100%;
    /* 这里的引号使用错误，应改为英文引号 */
    font-family: "Microsoft YaHei"; 
    font-size: 16px;
    background-color: #ec6f0f;
}

/* 设置所有链接的颜色和去除下划线 */
a {
    color: #000000;
    text-decoration: none;
}

/* 定义左浮动类 */
.lift {
    float: left;
}

/* 定义右浮动类 */
.right {
    float: right;
}

/* 设置侧边栏、顶部、主体和页脚元素为行内块元素 */
#cebian,
#top,
#main,
#footer {
    display: inline-block;
}

/* 侧边 */
/* 设置侧边栏的宽度和高度 */
#cebian {
    width: 20%;
    height: 100%;
}

/* 设置侧边栏内图片的宽度和高度 */
#cebian img {
    width: 100%;
    height: 100%;
}

/* 顶部 */
/* 设置顶部区域的宽度 */
#top {
    width: 80%;
}

/* 设置顶部区域内div元素的内边距和显示方式 */
#top div {
    padding: 20px;
    display: inline-block;
}

/* 设置顶部区域内p元素的位置、字体大小和粗细 */
#top p {
    position: relative;
    top: -14px;
    left: 10px;
    font-size: 25px;
    font-weight: 600;
    display: inline-block;
}

/* 设置顶部区域内图片的宽度、高度和圆角 */
#top img {
    width: 50px;
    height: 50px;
    border-radius: 15px;
}

/* 设置顶部区域内链接和下拉框的外边距、字体大小、颜色、边框和轮廓 */
#top a,
select {
    margin-right: 25px;
    font-size: 16px;
    color: #838383;
    border: none;
    outline: none;
}

/* 设置顶部区域内链接的悬停效果 */
#top a:hover {
    color: #FF6700;
}

/* 设置顶部区域右侧元素的位置 */
#top .top_right {
    position: relative;
    top: 10px;
}

/* 主体 */
/* 设置主体区域的阴影、内边距、显示方式、位置和背景颜色 */
#main {
    box-shadow: 1px 1px 8px #666666;
    padding: 40px;
    display: inline-block;
    position: absolute;
    top: 28%;
    left: 43%;
    background-color: #ffffff
}

/* 设置主体区域的悬停效果，增加阴影并设置过渡效果 */
#main:hover {
    box-shadow: 3px 3px 10px #666666;
    transition: all .6s;
}

/* 设置主体区域内按钮的颜色、外边距、边框、字体大小和背景颜色 */
#main button {
    color: #C5C5C5;
    margin-right: 10px;
    border: none;
    font-size: 25px;
    background-color: rgba(0, 0, 0, 0);
}

/* 设置主体区域内第一个按钮的颜色和底部边框 */
#main button:nth-child(1) {
    color: #000000;
    border-bottom: 3px solid #FF6700;
}

/* 设置主体区域内输入框的文本缩进、外边距、宽度、高度、字体大小、边框、背景颜色和圆角 */
#main input {
    text-indent: 10px;
    margin-top: 20px;
    display: block;
    width: 350px;
    height: 50px;
    font-size: 16px;
    border: none;
    background-color: #F9F9F9;
    border-radius: 5px;
}

/* 设置主体区域内div元素的显示方式 */
#main div {
    display: inline-block;
}

/* 设置主体区域内id为main1的元素显示 */
#main #main1 {
    display: block;
}

/* 设置主体区域内id为main2的元素隐藏 */
#main #main2 {
    display: none;
}

/* 设置主体区域内多选框的外边距、位置和宽度 */
#main .duoxuan {
    margin-top: 5px;
    position: relative;
    left: 10px;
    width: 15px;
    display: inline-block;
}

/* 设置主体区域内确认按钮的外边距、背景颜色、文字颜色、边框和轮廓 */
#main .queding {
    margin-top: 5px;
    background-color: #FFBE99;/*未勾选时背景颜色变暗，勾选时背景颜色变亮*/
    color: #ffffff;
    border: none;
    outline: none;
}

/* 设置主体区域内p元素的显示方式、位置、字体颜色和大小 */
#main p {
    display: inline-block;
    position: relative;
    color: #C5C5C5;
    font-size: 15px;
    left: 15px;
    top: -18px;
}

/* 设置主体区域内p元素下span元素的显示方式、外边距、字体粗细和颜色 */
#main p>span {
    display: inline-block;
    margin: 0px 5px;
    font-weight: bold;
    color: #000000;
}

/* 页脚 */
/* 设置页脚区域的文本对齐方式和宽度 */
#footer {
    text-align: center;
    width: 100%;
}

/* 设置页脚区域内p元素的位置、字体大小和颜色 */
#footer p {
    position: absolute;
    left: 40%;
    bottom: 3%;
    font-size: 14px;
    color: white;
}